<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>1688</span>
          </div>
          <div class="text item">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="品名" name="1">{{goodsDetail.subject}}</el-collapse-item>
              <el-collapse-item title="sku" name="2">
                <el-row>
                  <el-col :span="24" v-for="(item, index) in goodsDetail.skuInfos" :key="index">
                    <span
                      v-for="(i, index) in item.attributes"
                      :key="index"
                    >{{ i.attributeName }} : {{i.attributeValue}}&#8195;</span>
                    价格：{{item.consignPrice}}&#8195;
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item title="头图" name="3">
                <el-image
                  v-for="(item, index) in goodsDetail.image.images"
                  :key="index"
                  :src="item"
                  style="width: 100px; height: 100px;"
                />
              </el-collapse-item>
              <el-collapse-item title="单价" name="4">{{goodsDetail.referencePrice}} 元</el-collapse-item>
              <el-collapse-item title="详细" name="5">
                <el-row :gutter="20">
                  <el-col
                    :span="12"
                    v-for="(item, index) in goodsDetail.attributes"
                    :key="index"
                  >{{item.attributeName}} : {{item.value}}</el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item title="详情图片" name="6">
                <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                  <li
                    v-for="(item, index) in form.imageUrl"
                    :key="index"
                    class="infinite-list-item"
                  >
                    <el-image :src="item" alt="详情图" style="width: 400px;" />
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字节</span>
          </div>
          <div class="text item">
            <el-collapse v-model="activeTt">
              <el-collapse-item title="品名" name="1">
                <el-input v-model="goodsDetail.subject" :value="goodsDetail.subject" placeholder="品名"></el-input>
              </el-collapse-item>
              <el-collapse-item title="sku" name="2">
                <el-checkbox-group v-model="skuChecked">
                  <el-checkbox
                    v-for="(item) in goodsDetail.skuInfos"
                    :key="item.skuId"
                    :label="item.skuId"
                  >
                    <div v-for="(i, index) in item.attributes" :key="index" style="display: flex;">
                      {{i.attributeName}}
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 4}"
                        v-model="i.attributeValue"
                      />价格：
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 4}"
                        v-model="item.consignPrice"
                      />
                    </div>
                  </el-checkbox>
                </el-checkbox-group>
                <el-divider></el-divider>sku 添加：
                <el-row>
                  <div v-for="(item,index) in total" :key="index">
                    <el-col :span="8">
                      <el-select placeholder="请选择" @change="skuAdd">
                        <el-option
                          v-for="(item, index) in goodsDetail.skuInfos"
                          :key="index"
                          :label="item.attributes[0].attributeName + ':' + item.attributes[0].attributeValue + (item.attributes.length > 1 ? item.attributes[1].attributeName + ':' + item.attributes[1].attributeValue : '')"
                          :value="item.specId"
                        >
                          <span
                            v-for="(i, index) in item.attributes"
                            :key="index"
                          >{{ i.attributeName }}:{{i.attributeValue}}</span>
                          <span>价格：{{item.consignPrice}}</span>
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8">
                      <el-input v-model="addSku.desc[index]" placeholder="详细描述" />
                    </el-col>
                    <el-col :span="4">
                      <el-input type="number" v-model="addSku.price[index]" placeholder="价格" />
                    </el-col>
                  </div>
                  <el-col :span="4">
                    <el-button type="primary" icon="el-icon-circle-plus" @click="total++">添加</el-button>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item title="头图" name="3">
                <el-row>
                  <el-col :span="24" v-for="(item, index) in goodsDetail.image.images" :key="index">
                    <el-image
                      :src="item"
                      style="width: 100px; height: 100px;"
                      alt="不加载"
                    />
                    <el-input v-model="goodsDetail.image.images[index]" :value="item" placeholder="头图"></el-input>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item title="单价" name="4">
                <el-input v-model="goodsDetail.referencePrice" :value="goodsDetail.referencePrice"></el-input>
              </el-collapse-item>
              <el-collapse-item title="详细" name="5">
                <el-row :gutter="20">
                  <el-col
                    :span="12"
                    v-for="(item, index) in goodsDetail.attributes"
                    :key="index"
                  >{{item.attributeName}} : {{item.value}}</el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item title="详情图片" name="6">
                <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                  <li
                    v-for="(item, index) in form.imageUrl"
                    :key="index"
                    class="infinite-list-item"
                  >
                    <el-image :src="item" alt="详情图" style="width: 400px;" />
                    <el-input v-model="form.imageUrl[index]" :value="item" placeholder="详情图"></el-input>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        subject: this.goodsDetail.subject,
        skuInfos: [],
        images: this.goodsDetail.image.images,
        referencePrice: this.goodsDetail.referencePrice,
        imageUrl: [],
      },
      activeNames: ["0"],
      activeTt: ["0"],
      skuChecked: [],
      addSku: {skuId: [], desc: [], price: []},
      total: 1,
    };
  },
  props: {
    goodsDetail: {},
  },
  methods: {
    async getImageUrl() {
      await this.$http
        .post(`/ali/get-img`, {
          resources: this.goodsDetail.description,
        })
        .then((response) => {
          this.goodsDetail.description = response.data.dataMap.data;
          this.form.imageUrl = response.data.dataMap.data;
        });
    },
    load() {
      console.log();
    },
    skuAdd(item) {
      console.log(item);
    },
  },
  created() {
    this.getImageUrl();
  },
};
</script>

<style scoped>
.infinite-list {
  width: 400px;
  height: 500px;
  line-height: 40px;
  margin: 10px;
  overflow: auto;
}
li {
  list-style-type: none;
}
</style>
